<!DOCTYPE html>
<html class="ui-page-login">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<style>
			.area {
				margin: 20px auto 0px auto;
			}
			.mui-input-group:first-child {
				margin-top: 20px;
			}
			.mui-input-group label {
				width: 22%;
			}
			.mui-input-row label~input,
			.mui-input-row label~select,
			.mui-input-row label~textarea {
				width: 78%;
			}
			.mui-checkbox input[type=checkbox],
			.mui-radio input[type=radio] {
				top: 6px;
			}
			.mui-content-padded {
				margin-top: 25px;
			}
			.mui-btn {
				padding: 10px;
			}
			.mui-input-row{
				display: flex;
				align-items: center;
				justify-content: flex-start;
				padding-left: 20px;
			}
			input[type=text],input[type=password]{
				width: 80%;
			}
			.code{
				width: 65% !important;
			}
			.mui-content {
			    height: 100vh;
			    background-color: #E7EFFE;
			    padding:0 20px;
			    background:url(images/logoBg.png); background-size:100% 100%;
			}
			.hbg{
				background-color: #7DB1FD;
			}
			.hbg a,.hbg h1{
				color: white;
			}
			.list_item{ background:transparent;}
			.items{ height:50px!important; position:relative;  color:#333;    display: flex;  align-items: center;
			      justify-content: flex-start;
				  border-bottom:1px solid #fff;
				margin:16px 10px 0;
				/*background: #fff !important;*/
				border-radius: 3px;
				font-size: 15px;
			
			}
			.items:after{left:0!important; background:#fff!important;}
			.list_item:after,.list_item:before{ background:transparent;}
			#cfbut{ background:#7DB1FD; border:0; right:20px; position:absolute;}
			#sendMail{ background:#7DB1FD; border:0; }
			#reg{
				background:#7DB1FD; border:0; border-radius: 30px;
			}
			.mui-input-row .mui-input-clear~.mui-icon-clear{ top:20px;}
			.logo{ width:130px; height:120px; margin:15px auto;}
			.logo img{ width:100%; height:100%; display: block;}
			input::-webkit-input-placeholder {
		       /* placeholder颜色  */
		        color: #444;
		     
		     }
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hbg">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">注册</h1>
		</header>
		<div class="mui-content">
			<div class="logo"> <img src="./images/logo.png" alt="" /></div>
			<form class="mui-input-group list_item">
				<div class="mui-input-row items">
					<div class="mui-icon mui-icon-phone"></div>
					<input id='account' type="text" class=" mui-input-clear mui-input" placeholder="手机号">
				</div>
				
				<div class="mui-input-row items" >
					<div class="mui-icon mui-icon-paperclip"></div>
					<input id='code' type="text" class="mui-input-clear mui-input code" placeholder="请输入验证码">
					<button type="button" class=" mui-btn-blue" id="cfbut">发送</button>
				</div>
				<div class="mui-input-row items">
					<div class="mui-icon mui-icon-locked"></div>
					<input id='password' type="password" class="mui-input-clear mui-input" placeholder="请输入密码">
				</div>
				<div class="mui-input-row items">
					<div class="mui-icon mui-icon-locked"></div>
					<input id='password_confirm' type="password" class="mui-input-clear mui-input" placeholder="请确认密码">
				</div>
			</form>
			<div class="mui-content-padded">
				<button id='reg' class="mui-btn mui-btn-block mui-btn-primary">注册</button>
			</div>
			<div class="mui-content-padded">
				<p>注册真实可用，注册成功后的用户可用于登录，但是示例程序并未和服务端交互，用户相关数据仅存储于本地。</p>
			</div>
		</div>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/mui.min.js"></script>
		<script src="js/muishow.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/req.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/app.js"></script>
		<script>
			(function(mui, doc) {
					mui.init();
					let settings = app.getSettings();
					let regButton = doc.getElementById('reg');
					let accountBox = doc.getElementById('account');
					let passwordBox = doc.getElementById('password');
					let code = doc.getElementById('code');
					let passwordConfirmBox = doc.getElementById('password_confirm');
					regButton.addEventListener('tap', function(event) {
						var regInfo = {
							account: accountBox.value,
							password: passwordBox.value,
							code: code.value
						};
						if("" == regInfo.account || "" == regInfo.password){
							mui.toast('用户名或密码不能为空');
							return;
						}
						var passwordConfirm = passwordConfirmBox.value;
						if (passwordConfirm != regInfo.password) {
							mui.toast('密码两次输入不一致');
							return;
						}
						let data = {
						url:"/api/Login/registered",
						data:{
							mobile:regInfo.account,
							password:regInfo.password,
							code:regInfo.code
							},
						}
					ajax(data,function(res){
							console.log(res);
							if(res.code == -1){
								mui.toast(res.message);
							}
							if(res.code == 1){

								localStorage.setItem("accesstoken",res.data[0].access_token);
								localStorage.setItem("account",res.data[0].user.access_token);
								localStorage.setItem("headimage",res.data[0].user.access_token);
								localStorage.setItem("id",res.data[0].user.access_token);
								localStorage.setItem("mobile",res.data[0].user.access_token);
								localStorage.setItem("nickname",res.data[0].user.access_token);
								mui.toast("注册成功");
								mui.back();
							}
						});	
					});
			let i = 60,flag = true;
			$("#cfbut").bind("click",function(){
				if(flag){
					let data = {
						url:"/api/Msn/index",
						data:{
							mobile:accountBox.value
						},
					}
					ajax(data,function(json){
							console.log(json);
							
						});
					let time;
					flag = !flag;
					mui.toast('验证码已发送到您的手机，请稍等...');
					time = setInterval(function(){
						i--;
						$("#cfbut").html("重发"+ i);
						if(i < 1){
							i = 60;
							 clearInterval(time);
							 mui.toast("如果验证码未收到，请重发");
							 flag = !flag;
							 $("#cfbut").html("重发");
						}
					},1000);
				}
			})
				}(mui, document));
		</script>
	</body>

</html>